<template>
  <div style="margin: 15px 15px">
<!--    <div id="id_local_video" style="width:100%;height:500px;display:flex;align-items:center;justify-content:center;"></div>-->
    <div v-if="start">
      离开该界面将取消直播
    </div>
    <el-button @click="changeSound" v-if="!start">开启声音</el-button>
    <el-button @click="changeScreenCapture" v-if="!start">开启屏幕</el-button>
    <el-button @click="exitPush" v-if="start" type="danger">结束直播</el-button>
  </div>
</template>

<script>
  import moment from 'moment'
  import md5 from 'js-md5'
  import { liveCourseStatus } from "../../../api/psedu-base/course"
  export default {
    name: "startLive",
    data() {
      return {
        courseId: this.$route.query.courseId,
        startMicrophone: false,
        startScreenCapture: false,
        startPush: false,
        startCamera: false,
        livePusher: {},
        start: false
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        var livePusher = new TXLivePusher();
        this.livePusher = livePusher;
        // livePusher.setRenderView('id_local_video');
        livePusher.setAudioMute(true);
        // 设置视频质量
        livePusher.setVideoQuality('1080p');
        // 设置音频质量
        livePusher.setAudioQuality('standard');
        // 自定义设置帧率
        livePusher.setProperty('setVideoFPS', 60);
        // 打开屏幕共享
        // livePusher.startCamera();
        livePusher.startScreenCapture();
        // 打开麦克风
        livePusher.startMicrophone();
        var hasVideo = false;
        var hasAudio = false;
        var isPush = false;
        var time = moment().add(1, 'days');
        var unixTime = time.unix().toString(16);
        var streamName = `course${this.courseId}`;
        var key = "yourkey";
        var txSecret = md5(key +streamName +unixTime);
        console.log(txSecret +"+++++++++++");
        var that = this;
        livePusher.setObserver({
          onCaptureFirstAudioFrame: function() {
            that.startMicrophone = true;
            hasAudio = true;
            if (hasVideo && !isPush) {
              isPush = true;
              livePusher.startPush(`webrtc://166325.livepush.myqcloud.com/live/${streamName}?` +'txSecret=' +txSecret +'&txTime=' +unixTime);
              that.start = true;
              liveCourseStatus(that.courseId, 1);
            }
          },
          onCaptureFirstVideoFrame: function() {
            that.startScreenCapture = true;
            hasVideo = true;
            if (hasAudio && !isPush) {
              isPush = true;
              livePusher.startPush(`webrtc://166325.livepush.myqcloud.com/live/${streamName}?` +'txSecret=' +txSecret +'&txTime=' +unixTime);
              that.start = true;
              liveCourseStatus(that.courseId, 1);
            }
          }
        });
      },
      changeSound() {
        if(this.startMicrophone) {
          this.livePusher.stopMicrophone();
        } else {
          this.livePusher.startMicrophone();
        }
        this.startMicrophone = !this.startMicrophone;
        if(!this.start) {
          this.init();
        }
      },
      changeScreenCapture() {
        console.log(this.livePusher);
        if(this.startScreenCapture) {
          this.livePusher.stopScreenCapture();
        } else {
          this.livePusher.startScreenCapture();
        }
        this.startScreenCaptrue = !this.startScreenCaptrue;
        if(!this.start) {
          this.init();
        }
      },
      exitPush() {
        this.livePusher.stopPush();
        this.livePusher.destroy();
        this.start = false;
        liveCourseStatus(this.courseId, 0);
      }
    }
  }

</script>

<style scoped>

</style>
